<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>

		<!-- 1.导入JS函数类库 -->
		<script src="js/jquery-3.6.0.min.js"></script>
		<!-- 2.编辑JS发起Ajax请求 -->
		<script>
			//循环写法
			/**
			 * 		//js 实现for循环
					for(var i=0;i<data.length;i++){
						var user = data[i]
						console.log(user)
					}
					
					in关键字  index代表下标
					for(var index in data){
						
						console.log(data[index])
					}
					
					//增强for写法 of 表示直接获取遍历内容
					for(var user of data){
						
						console.log(user)
					}
			 */




			//让页面加载完成之后再次执行  
			//语法: 函数式编程
			$(function() {
				//alert("页面加载完成,jQuery调用成功!!!!")
				//利用Ajax的get请求方式   
				//http://localhost:8090/getUser 全部数据
				//将数据以表格的形式展现
				//种类: 1.$.get()   2.$.post() 3.$.getJSON()  4.$.ajax()
				//js中可以根据返回值的数据动态匹配类型
				//$.get("url地址","参数",function(data){},"返回值类型")

				var name = "张三"
				var age = 18
				//参数写法1: key=value&key2=value2
				var args1 = "name=" + name + "&age=" + age
				//参数写法: {key:value,key2:value2}
				var args2 = {
					name: name,
					age: age
				}
				//如果有参数,则直接添加,如果没有参数,则直接省略
				var url = "http://localhost:8090/getUser2";
				$.get(url, function(data) {
					//增强for写法 of 表示直接获取遍历内容
					for (var user of data) {
						var id = user.id
						var name = user.name
						var age = user.age
						var sex = user.sex
						var tr = "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age +
							"</td><td>" + sex + "</td></tr>"

						//利用ID选择器定位table标签
						//append 向每个匹配的元素内部追加内容。
						$("#tab1").append(tr)
					}
				})

				/**
				 * $.ajax相关说明
				 * 1.{key:value}
				 * 2.type: ajax请求的方式 get/post/put/delete
				 * 3.简化$.get(..) $.post(...)  $.getJSON(...)
				 * 4.url: 远程服务器地址
				 * JSONP: JS端解决跨域问题的一种机制. 现在几乎淘汰了
				 * cache: true 默认值为true
				 * async: true 默认异步!!!!
				 */
				$.ajax({
					type: "get",
					url: "http://localhost:8090/getUser",
					//data: {key:value,key2:value2}
					dataType: "json",
					async: false, //异步改为同步
					cache: false,
					success: function(result) { //200
						console.log(result)
					},
					error: function() {
						alert("服务器正忙,请稍后!")
					}
				})

		



			})
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" width="700px" align="center">
			<tr>
				<td colspan="4" align="center">
					<h1>表格数据</h1>
				</td>
			</tr>
			<tr align="center">
				<td>ID编号</td>
				<td>名称</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
		</table>
	</body>
</html>
